<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>新的模板</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            .basic{
                width: 400px;
                height: 100px;
                border: 1px solid back;
            }

            /* .happy{}

            .sad{}

            .normal{}

            .atguigu1{}

            .atguigu2{}

            .atguigu3{

            } */

        </style>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            <!-- 绑定class样式 -- 字符串写法, 适用于：样式的类名不确定, 需要动态指定 -->
            <div :class="basic" @click="changeMood">{{name}}</div>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。

            new Vue({
                el:'#root'
                ,data:{
                    name: 'Test'
                    ,basic:'basic'
                }
                ,methods: {
                    changeMood(){
                        const arr = ['happy', 'basic', 'normal']
                        const i = Math.floor(Math.random() * 3)
                        this.basic = arr[i]
                    }
                },
            })

        </script>
    </body>
</html>